<template>
<div class="imagebox" :style="styleColor">
  <div class="line" :style="lineStyle"></div>
</div>
</template>

<script>
export default {
  name: 'widgetLine',
  props: {
    value: Object,
    ispreview: Boolean
  },
  components: {},
  data() {
    return {
      options: {},
    }
  },
  computed: {
    lineStyle(){
      // let animateName = this.transStyle.isLineFlow?(this.transStyle.leftRightImage?'move2':'move'):''
      let animateName = this.transStyle.leftRightImage?'move2':'move'
      animateName = this.transStyle.isLineFlow?animateName:''
      return {
        animation: `${animateName} ${this.transStyle.flowSpeed}s infinite linear`,
        borderTop: `${this.transStyle.lineWidth}px dashed ${this.transStyle.lineColor}`, /* 设置边框宽度为2px，样式为虚线，颜色为黑色 */
      }
    },
    transStyle() {
      return this.objToOne(this.options);
    },
    styleColor() {
      return {
        opacity: this.transStyle.transparency / 100,
        transform: `scaleX(1) scaleY(1)`,
        position: this.ispreview ? "absolute" : "static",
        background: this.transStyle.background,
        "text-align": this.transStyle.textAlign,
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        right: this.transStyle.right + "px"
      };
    },
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
      },
      deep: true
    }
  },
  created() {
    this.options = this.value;
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.imagebox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-direction: column;
 
.line{
  width: 200%;
  position: absolute;
  left: -100%;
}

}
</style>
<style>
@keyframes move {
        from {
          left:-100%
        }
        to {
          left: 0%;
        }
      }
      @keyframes move2 {
        from {
          left:0%
        }
        to {
          left: -100%;
        }
      }
</style>
